<template>
	<view class="">

		
		<view style="margin:40rpx auto;width: 500rpx;">
			<u-image :src="$ftpUrl('/helpTitle.png')" width="500" height="200"></u-image>
		</view>
		
		
		<view class="mode u-text-center u-flex u-row-between" v-if="ismy">
			<view class="u-font-weight">订单金额</view>
			<view class="u-font-weight  $u-type-error " style="font-size: 50rpx;">￥{{info.totalMoney}}</view>
		</view>
		
		
		<view class="mode u-text-center" v-if="ismy">
			<view class="u-font-weight">{{info.count}}位好友已为您砍掉</view>
			<view class="u-font-weight u-margin-top-20 $u-type-error " style="font-size: 50rpx;">￥{{info.bargainMoney}}</view>
		</view>
	
		<view class="mode u-text-center" v-if="show">
			<view class="u-font-weight">哇哦~你一刀砍掉了</view>
			<view class="u-font-weight u-margin-top-20 $u-type-error " style="font-size: 50rpx;">￥{{bargainMoney}}</view>
			<button class="btn"  @click="back">我也要设计</button>
		</view>
		
		<view v-if="ismy" style="background: #fff;border-radius: 40rpx;margin: auto;width: 700rpx;">
			<view v-for="(item,index) in list" :key="index" class="u-flex u-row-between u-padding-30 u-border-bottom">
				<view>{{item.nickname}}</view>
				<view class="$u-type-error" >砍掉{{item.bargainMoney}}</view>
			</view>
		</view>
		

		<button class="btn" v-if="!ismy && !show" @click="help" >砍一刀</button>
		
		
		
		<wr-article  ID='25'  ></wr-article>
		
		
		<view  v-if="ismy"
			style="background: #fff; border-top: 1rpx solid #e1e1e1; padding: 20rpx; position: fixed;z-index: 999;bottom: 0;display: flex;justify-content: space-around;width: 100%;">
			<u-button   @click="buy" shape="circle" :custom-style="{background:'#FFA843',color:'#fff',}">
				支付￥{{info.surplus}}</u-button>
		
			<u-button shape="circle" open-type="share"  :custom-style="{background:'#FF5D39',color:'#fff'}">
				分享砍价</u-button>
		
		</view>
		
		


		<u-toast ref="uToast" />




	</view>
</template>

<script>
	import url from '@/common/baseUrl.js';
import payway from '@/common/wxpay.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				
				id: "",
				info: {

				},
				list: [],
				page: 1,
				status: 'loadmore',
				ismy: false,
				show:false,
				bargainMoney:""
			    


			}
		},
		computed:{
			...mapState(["userInfo"])
		},
		 onLoad(options) {
			if (options.id) {
				this.id = options.id
			}
		},
		async onShow() {
		   await this.record()
		   this.$u.api.userInfo().then(res=>{
			   
			   if(res.id==this.info.memberId){
				   this.ismy=true;
				   this.help()
				   
			   }else{
				   this.ismy=false;
				   
			   }
		   })
		},
		onReachBottom() {
			if (this.status == 'nomore') {

			} else {
				this.record()
			}

		},
		
		onShareAppMessage(){
			  return {
			       imageUrl:'/static/logo.png',
			       title:'我在萌萌安家免费设计，借你的大刀砍一砍~'
			    }
		},
	

		methods: {
			help() {
				this.$u.post('/indent/bargain', {
					order_id: this.id
				}, {}).then(res => {
					var price=res.bargainMoney;
					this.$refs.uToast.show({
						title: '帮砍'+ price + "元",
						type: 'success',
					})
					this.bargainMoney=price;
					this.show=true

				}).catch(err => {})

			},
			back(){
				uni.switchTab({
					url:"/pages/designCenter/index"
				})
			},
			buy(){
				this.$u.post('/indent/pay', {
					order_id:this.id
				}).then(res => {
					var packages = res.package;
					var {
						noncestr,
						timestamp,
						signtype,
						paysign
					} = res
					payway.wx(timestamp, noncestr, packages, signtype, paysign).then(res => {
						this.$refs.uToast.show({
							title: '支付成功',
							type: 'success',
							back:true
						})
					
					}).catch(err => {
						
					})
					
				}).catch(err => {
				
				})
			},
			record() {
				
				 return new  Promise((resolve,reject)=>{
					 this.$u.post('/Indent/bargainLog', {
					 	order_id: this.id
					 }, {}).then(res => {
					 	this.info=res;
					 	var resList = res.list;
					 	if (this.page == 1) {
					 		this.list = []
					 	}
					 	if (resList.length > 9) {
					 		this.status = 'loadmore'
					 		this.page = this.page + 1
					 	} else {
					 		this.status = 'nomore'
					 	}
					 	this.list = this.list.concat(resList)
					 	this.loading = false;
						 resolve(res);
					 }).catch(err => {})
					 
				 })
			
			}
		}
	}
</script>

<style lang="scss">
	page {

		width: 100%;
		min-height: 100%;
		
		 background-image: linear-gradient( #FB5E3F, #FDDFA9);
		display: inline-block;
	}

	
	.mode1 {
		width: 690rpx;
		margin: 40rpx auto;
		border-radius: 40rpx;
		background: #FFFFFF;
		position: relative;
		padding: 40rpx;
	}

	.mode {
		width: 690rpx;
		margin: 40rpx auto;
		border-radius: 40rpx;
		background: #FFFFFF;
		position: relative;
		padding: 40rpx;

		.time {
			background: #FF6450;
			border-radius: 40rpx 0px;
			text-align: center;
			color: #FFFFFF;
			font-size: 28rpx;
			position: absolute;
			top: 0;
			left: 0;
			padding: 14rpx 30rpx;
		}
	}

	.btn {
		width: 367rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin: 40rpx auto;
		color: #FFFFFF;
		background: linear-gradient(89.39deg, #FF6450 5.28%, #FFB525 99.47%);
		border-radius: 50rpx;
		font-size: 28rpx;
	}
</style>
